<template>
  <div class="container">
    <!-- 通知栏 -->
    <van-notice-bar :text="information" left-icon="volume-o" />
    <!-- 轮播图 -->
    <van-swipe :autoplay="2000" indicator-color="white">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img v-lazy="image" />
      </van-swipe-item>
    </van-swipe>
    <van-grid :column-num="3">
      <van-grid-item
        v-for="(value, index) in icons"
        :key="index"
        :icon="value.icon"
        :text="value.text"
        @click="toCate"
      />
    </van-grid>

    <!-- 开始点餐区域 -->
    <div class="btn_start">
      <van-button color="#1e90ff" @click="toShopping">开始点餐</van-button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 通知消息
      information:
        "亲，不要错过啦！今天的汉堡半价，美味又好吃，只要9.9 ，只要 9.9 ，只要9.9 ，错过了今天就要再等明年啦！",
      // 轮播图片
      images: [
        "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1588936989875&di=23e44cd94a1ebaa98f025f14d1dfbfca&imgtype=0&src=http%3A%2F%2Fdpic.tiankong.com%2Fvk%2Fim%2FQJ6952430137.jpg",
        "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1588937027200&di=7a5110c93f758d36737ab9277e037146&imgtype=0&src=http%3A%2F%2Fwww.shang360.com%2Fupload%2Farticle%2F20170314%2F05884889881489475213.jpg",
        "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1588937559595&di=168cf89e1f88e790531149276e7bb465&imgtype=0&src=http%3A%2F%2Fimgqn.koudaitong.com%2Fupload_files%2F2014%2F11%2F27%2FFuv2Fej7Ll5Q3tGzjh6cp66A2Owl.jpg%2521730x0.jpg",
        "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3447997522,972655650&fm=26&gp=0.jpg",
        "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1588937666267&di=11714e8a2ca179728e79775de3506461&imgtype=0&src=http%3A%2F%2Fimgs.91cy.cn%2Fcy91cycn%2F18-12-14%2F20181214080512caph9383.jpg"
      ],
      // 导航栏
      icons: [
        {
          icon: "https://s1.ax1x.com/2020/05/09/YQbJJJ.png",
          text: "粉面"
        },
        {
          icon: "https://s1.ax1x.com/2020/05/09/YQblZT.png",
          text: "饭粥"
        },
        {
          icon: "https://s1.ax1x.com/2020/05/09/YQbGi4.png",
          text: "汉堡"
        },
        {
          icon: "https://s1.ax1x.com/2020/05/09/YQb1dU.png",
          text: "雪糕"
        },
        {
          icon: "https://s1.ax1x.com/2020/05/09/YQb3oF.png",
          text: "水果"
        },
        {
          icon: "https://s1.ax1x.com/2020/05/09/YQbYW9.png",
          text: "饮料"
        }
      ]
    };
  },
  created() {
    // 加载页面时设置底部导航栏激活状态
    this.$store.commit('setBottomNavActive',0)
  },
  methods: {
    toShopping() {
      this.$router.push('goods')
    },
    toCate() {
      console.log(111);
      
    }
  }
};
</script>
<style lang="less" scoped>
.container {
  padding-bottom: 60px;
}
.van-swipe-item {
  width: 100vw;
  height: 230px;
  img {
    width: 100%;
    height: 100%;
  }
}
.btn_start {
  text-align: center;
  position: fixed;
  bottom: 70px;
  left: 50%;
  transform: translate(-50%);
}
</style>
